<template>
	<view>
		<view class="container">

			<form @submit="Login">
				<view class="avatorWrapper">
					<!-- <view class="avator">
						<image class="img" src="../../static/logo.png" mode="widthFix"></image>
					</view> -->
				</view>
				<view class="form">
					<view class="inputWrapper">
						<input class="input" v-model="phoneNum" type="text" value="" placeholder="手机号" />

					</view>
					<view class="inputWrapper">
						<input class="input2" type="text" v-model="code" value="" maxlength="5" placeholder="验证码" />
						<view :class="[disabledCode==false?'onSendCode':'onSendCodeNo']" @tap="onSendCode">{{codeText}}</view>
					</view>
				</view>
				<button form-type="submit" class="loginBtn">登录</button>
			</form>
			<view class="transfer">
				<view class="loginSms" @click="changeModel()">
					密码登录
				</view>
				<text>|</text>
				<view class="Registration" @click="toForgotPassword()">
					忘记密码？
				</view>
			</view>
			<view class="registrationBtn">

			</view>
			<button @click="toRegistration()" class="registration">注册</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"

	export default {
		computed: {
			...mapState('user_List', ['userList', 'Token']),
		},
		// onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
		// 	console.log(option); //打印出上个页面传递的参数。
		// 	this.kind = option.kind
		// },

		props: {
			kind: String,
			required: true
		},
		data() {
			return {
				// kind: '',
				code: null,
				codeText: '获取验证码',
				disabledCode: false,
				phoneNum: "18575842937",
				phonePassword: "123456",
			}
		},
		methods: {
			...mapMutations('user_List', ['addToken']),

			//登录
			Login() {
				var regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/; //手机号码
				// var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; //邮箱
				//判断手机号码
				if (!regex.test(this.phoneNum)) {
					console.log("格式错误");
					uni.$showMsg("手机号格式错误");
					// this.phoneText();
				} else if (this.code == null) { //验证码是否为空
					console.log("验证码为空");
					uni.$showMsg("验证码为空");
				} else {
					this.phoneLoginSms();
				}
			},



			changeModel() {
				this.model = true;
				this.$emit('closeMain', this.model);
			},
			toRegistration() {
				uni.navigateTo({
					url: '../registration/registration?kind=' + this.kind
				})
			},
			toForgotPassword() {
				uni.navigateTo({
					url: '../../pages/forgotPassword/forgotPassword'
				})
			},
			//获取验证码
			onSendCode() {
				console.log('获取验证码');
				var regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/; //手机号码
				if (regex.test(this.phoneNum)) {
					this.disabledCode = true;
					let self = this
					// self.show = true;
					var time = 60;
					var timer = setInterval(fun, 1000);

					function fun() {
						time--;
						if (time >= 0) {
							self.codeText = time + "s";
						} else if (time < 0) {
							self.codeText = "获取验证码";
							self.disabledCode = false;
							clearInterval(timer);
							time = 60;
						}
					}
					// this.$request.post('/Login', {
					// 	phone: this.phoneNum
					// }).then(data => {
					// 	console.log('data', data);
					// 	let res = true;
					// 	if (!res) {
					// 		console.log('验证码获取失败')

					// 	} else {
					// 		let self = this
					// 		// self.show = true;
					// 		var time = 60;
					// 		var timer = setInterval(fun, 1000);

					// 		function fun() {
					// 			time--;
					// 			if (time >= 0) {
					// 				self.codeText = time + "s";
					// 			} else if (time < 0) {
					// 				self.codeText = "获取验证码";
					// 				self.disabledCode = false;
					// 				clearInterval(timer);
					// 				time = 60;
					// 			}
					// 		}
					// 	}
					// })
				}
			},
			phoneLoginSms() {
				this.$request.post('/Login/Sms', {
					phone: this.phoneNum,
					code: this.code
				}).then(data => {
					console.log('data', data);
					if (data.data.code === "200") {
						uni.setStorageSync("Authorization", data.data.data);
						// uni.setStorageSync("expiresIn", new Date() + data.data.expires_in * 1000)
						console.log("Token缓存成功");
					}
				})
				if (this.kind == 'older') {
					uni.navigateTo({
						url: '../individuation/individuation'
					})
				} else {
					console.log("跳转失败")
				}
			}

		}
	}
</script>

<style>
	.container {
		/* background: #377EB4; */
		width: 100vw;
		height: 100vh;
	}

	.avatorWrapper {
		width: 100%;
		height: 30vh;
		position: relative;
		z-index: 1;
		text-align: center;
		line-height: 200px;
	}

	.avatorWrapper::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		left: 0;
		z-index: -1;
		border-radius: 0 0 35% 35%;
		background: url('../../static/oldster/login/headerIcon.png');
		background-size: cover;
	}


	/* 	.avator {
		width: 100%;
		height: 100%;
		overflow: hidden;
	} */

	.avator .img {
		/* height: 100%; */
		/* width: 100%; */
		max-width: 100%;
		max-height: 100%;
	}

	.form {
		padding: 0 75rpx;
		margin-top: 30px;
	}

	.inputWrapper {
		width: 100%;
		height: 120upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 50rpx;
		position: relative;
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 2vh;
	}

	.inputWrapper .input2 {
		width: 100%;
		height: 100%;
		/* text-align: center; */
		/* padding-left: 10%; */
		text-indent: 10%;
		font-size: 50rpx;
		position: relative;
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 2vh;
	}


	.loginBtn {
		width: 70%;
		height: 120upx;
		color: #FFFFFF;
		background: linear-gradient(#FEBC86, #F76D2E);
		letter-spacing: 2vh;
		text-align: center;
		font-size: 50rpx;
		border-radius: 2vh;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.registration {
		width: 70%;
		height: 120upx;
		color: #E4A959;
		letter-spacing: 2vh;
		text-align: center;
		font-size: 50rpx;
		font-weight: bold;
		/* background: linear-gradient(#FEBC86,#F76D2E); */
		border: 5rpx solid #F0CDB1;
		border-radius: 2vh;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50px;
	}

	.registrationBtn {
		display: flex;
		margin-top: -50px;
	}


	.loginBtn .btnValue {
		color: white;
	}

	.forgotBtn {
		text-align: center;
		color: #EAF6F9;
		font-size: 15px;
		margin-top: 20px;
	}

	.transfer {
		width: 100%;
		height: 10%;
		display: flex;
		margin-top: 10%;
		/* margin: 0 auto; */

		text-align: center;
	}

	.Registration {

		margin: 0 auto;

	}

	.loginSms {
		margin: 0 auto;
	}

	.onSendCode {
		height: 80upx;
		width: 28%;
		/* background-color: #007AFF; */
		color: #FFFFFF;
		background: linear-gradient(#FEBC86, #F76D2E);
		font-size: 35rpx;
		position: absolute;
		text-align: center;
		line-height: 5vh;
		top: 47%;
		right: 18%;
		border: 3rpx solid #F76D2E;
		border-radius: 4vh;

	}

	.onSendCodeNo {
		height: 80upx;
		width: 28%;
		/* background-color: #007AFF; */
		color: #FFFFFF;
		background: linear-gradient(#FEBC86, #F76D2E);
		font-size: 35rpx;
		/* float: right; */
		position: absolute;
		text-align: center;
		line-height: 5vh;
		/* display: block; */
		top: 47%;
		right: 18%;
		border: 3rpx solid #F76D2E;
		border-radius: 4vh;
		pointer-events: none; //禁用点击事件,节流
	}
</style>
